Component({
  properties: {
    title: {
      type: String,
      value: ''
    },
    value: {
      type: Number,
      value: 0
    },
    max: {
      type: Number,
      value: 100
    },
    unit: {
      type: String,
      value: '%'
    },
    color: {
      type: String,
      value: '#07c160'
    },
    showInfo: {
      type: Boolean,
      value: false
    },
    extraInfo: {
      type: String,
      value: ''
    }
  },

  data: {
    percentage: 0
  },

  observers: {
    'value, max': function(value, max) {
      this.calculatePercentage(value, max);
    }
  },

  methods: {
    calculatePercentage(value, max) {
      if (max <= 0) {
        this.setData({ percentage: 0 });
        return;
      }
      
      let percentage = (value / max) * 100;
      // 限制在0-100之间
      percentage = Math.min(100, Math.max(0, percentage));
      this.setData({ percentage });
    }
  }
});